<template>
    <div class="order-report-wrapper">
        <div class="order-report-container">
            <div class="report-table-form1-line" v-if="roleId === 1">
                <div class="report-table-form1-item word samll" style="width: 80px">代理商:</div>
                <div class="report-table-form1-item" style="width: 180px">
                    <el-select v-model="select" filterable placeholder="请选择" size="small">
                        <el-option
                            v-for="(item, index) in options"
                            :key="item.id"
                            :label="item.userName"
                            :value="index"
                        ></el-option>
                    </el-select>
                </div>
            </div>
            <!-- 整体概况 -->
            <div class="title">整体概况</div>
            <div class="total">
                <div class="total-item">
                    <div class="total-item-sub-title">本月累计收益（元）</div>
                    <div class="total-item-sub-num">{{commisionSumMoney.monthCommisionMoney || 0}}</div>
                </div>
                <div class="total-item">
                    <div class="total-item-sub-title">昨日收益（元）</div>
                    <div class="total-item-sub-num">{{commisionSumMoney.yesterdayCommisonMoney || 0}}</div>
                </div>
                <div class="total-item">
                    <div class="total-item-sub-title">名下商家数</div>
                    <div class="total-item-sub-num">{{commisionSumMoney.agentTotalCompanyNum || 0}}</div>
                </div>
                <div class="total-item">
                    <div class="total-item-sub-title">收益商家数</div>
                    <div class="total-item-sub-num">{{commisionSumMoney.agentAvailsCompanyNum || 0}}</div>
                </div>
            </div>
            <!-- 日期 -->
            <div style="margin-top: 15px;">
                <div class="report-table-form1-item word samll" style="width: 70px;">日期:</div>
                <div class="report-table-form1-item" style="width: 200px">
                    <el-date-picker
                        size="small"
                        v-model="timeStart"
                        type="date"
                        value-format="yyyy-MM-dd 00:00:00"
                        placeholder="选择日期"
                    ></el-date-picker>
                </div>
                <div class="report-table-form1-item word samll" style="width: 20px">至</div>
                <div class="report-table-form1-item" style="width: 200px">
                    <el-date-picker
                        size="small"
                        v-model="timeEnd"
                        type="date"
                        value-format="yyyy-MM-dd 23:59:59"
                        placeholder="选择日期"
                    ></el-date-picker>
                </div>
                <div class="report-table-form1-item word samll" style="width: 40px">省份</div>
                <div class="report-table-form1-item" style="width: 180px;margin-right: 1px">
                    <el-select v-model="cityLevelCode" placeholder="请选择" size="small">
                        <el-option
                            v-for="item in options1"
                            :key="item.regioncode"
                            :label="item.regionname"
                            :value="item.regioncode"
                        ></el-option>
                    </el-select>
                </div>
                <div class="report-table-form1-item word samll" style="width: 40px"></div>
                <el-button type="primary" size="small" @click="search">查询</el-button>
            </div>
            
            <!-- 流失商家 -->
            <!-- <div class="pt30"></div>
            <div class="title">流失商家</div>
            <div class="table">
                <el-table
                    :header-cell-style="headerCellStyle"
                    size="small"
                    :data="showList"
                    border
                    style="width: 100%"
                >
                    <el-table-column prop="companyCode" label="商家编号"></el-table-column>
                    <el-table-column prop="companyName" label="商家名称"></el-table-column>
                    <el-table-column prop="companyCode" label="城市"></el-table-column>
                    <el-table-column prop="companyCode" label="当天商家营业额"></el-table-column>
                    <el-table-column prop="companyCode" label="当天订单数"></el-table-column>
                    <el-table-column prop="companyCode" label="前天订单数"></el-table-column>
                    <el-table-column prop="companyCode" label="流失指数"></el-table-column>
                </el-table>
            </div> -->
            <!-- 可发展商家 -->
           <!--  <div class="pt30"></div>
            <div class="title">可发展商家</div>
            <div class="table">
                <el-table
                    :header-cell-style="headerCellStyle"
                    size="small"
                    :data="showList"
                    border
                    style="width: 100%"
                >
                    <el-table-column prop="companyCode" label="商家编号"></el-table-column>
                    <el-table-column prop="companyName" label="商家名称"></el-table-column>
                    <el-table-column prop="companyCode" label="城市"></el-table-column>
                    <el-table-column prop="companyCode" label="当天商家营业额"></el-table-column>
                    <el-table-column prop="companyCode" label="当天使用支付流水"></el-table-column>
                    <el-table-column prop="companyCode" label="发展指数"></el-table-column>
                </el-table>
            </div> -->
            <!-- 业务收益 -->
            <div class="pt30"></div>
            <div class="title">业务收益<span style="display: inline-block;margin-left: 14px;;font-size: 14px;color: red;">收益金额=网络支付金额*（商家费率-2.8）/1000</span></div>
            <div class="table">
                <el-table
                    :header-cell-style="headerCellStyle"
                    size="small"
                    :data="showList"
                    border
                    style="width: 100%"
                >
                    <el-table-column prop="companyCode" label="商家编号"></el-table-column>
                    <el-table-column prop="companyName" label="商家名称"></el-table-column>
                    <el-table-column prop="companyAddress" label="商家地址"></el-table-column>
                    <el-table-column prop="agentCommisionMoney" label="支付收益"></el-table-column>
                    <el-table-column prop="netPayTotalMoney" label="网络支付总额"></el-table-column>
                    <el-table-column prop="netPayRate" label="支付费率(千分)"></el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="report-table-block">
                <div class="report-table-block-in">
                    <el-pagination
                        background
                        :current-page.sync="page"
                        @current-change="handleCurrentChange"
                        :page-size="10"
                        layout="prev, pager, next, total"
                        :total="totalNum"
                    ></el-pagination>
                </div>
            </div>
            <!-- 收益分析 -->
            <div class="pt30"></div>
            <div class="title">收益分析</div>
            <div class="analysis-box">
                <div class="analysis-rate">
                    <!-- <div class="analysis-title col94">累计收益</div>
                    <div class="analysis-content">
                        <div class="analysis-num">4326</div>
                        <div class="analysis-upper">
                            <span class="col94">同比</span>
                            <i class="el-icon-caret-bottom green"></i>
                            12%
                        </div>
                    </div>
                    <div class="pt30"></div>
                    <div class="analysis-title col94">支付收益</div>
                    <div class="analysis-content">
                        <div class="analysis-num">4326</div>
                        <div class="analysis-upper">
                            <span class="col94">环比</span>
                            <i class="el-icon-caret-top red icon"></i>
                            12%
                        </div>
                    </div>
                    <div class="pt30"></div>
                    <div class="analysis-title col94">短信收益</div>
                    <div class="analysis-content">
                        <div class="analysis-num">4326</div>
                        <div class="analysis-upper">
                            <span class="col94">环比</span>
                            <i class="el-icon-caret-top red icon"></i>
                            12%
                        </div>
                    </div> -->
                </div>
                <div class="analysis-chart">
                    <div class="eChart-pic" id="myChart2" ></div>
                    <div class="valueMap col94">
                        <!-- <div class="inline-block rect blue"></div>累计收益
                        <div class="inline-block rect green"></div>支付收益
                        <div class="inline-block rect red"></div>短信收益 -->
                    </div>
                </div>
            </div>
            <div class="pt30"></div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import echarts from 'echarts'
export default {
    data: function () {
        return {
            timeStart: '',
            timeEnd: '',
            commisionSumMoney: {},
            showList: [
                {
                    companyCode: 1,
                    companyName: '宁波店'
                }
            ],
            xAxis: ['05-24', '05-25', '05-26', '05-27', '05-28', '05-29', '05-30'],
            series1: [32, 20, 45, 57, 32, 17, 20],
            series2: [32, 32, 17, 20, 20, 45, 57],
            series3: [17, 45, 57, 32, 20, 32, 20],
            options1: [],
            cityLevelCode: '',
            page: 1,
            totalNum: 0,
            companyCode: 0,
            myChart: null,
            options: [],
            select: 0
        }
    },
    mounted () {
        // this.setPie1()
    },
    created () {
        let time = new Date()
        let year = time.getFullYear()
        let month = time.getMonth() + 1
        let date = time.getDate()
        this.timeStart = this.timeEnd = year + '-' + month + '-' + date
        // 此处 companyCode 固定为 '999999'
        this.companyCode = '999999'
        this.$store.dispatch('setCompanyCode', this.companyCode)
        this.getProvice()
        if (this.$store.state.roleId === 1) {
            this.getAllAgent()
        } else {
            this.getData()
        }
    },
    watch: {
        active () {
            if (this.active === '2') {
                this.myChart && this.myChart.resize()
            }
        },
        select () {
            this.getData()
        }
    },
    components: {
    },
    props: {
        underLine: null,
        active: {
            default: 2
        }
    },
    computed: {
        roleId () {
            return this.$store.state.roleId
        },
        userName () {
            if (this.$store.state.roleId === 1) {
                return this.options.length > 0 ? this.options[this.select].userName : ''
            } else {
                return this.$store.state.userName
            }
        }
    },
    methods: {
        getData () {
            // 获取所有数据
            this.getNetpayCommisionSumMoney()
            this.getNetpayCompanyCommisonInfo()
            this.getNetpayCompanyWeekInfo()
        },
        getAllAgent () {
            this.$http.post(this.$store.state.IP + '/system/company/getAllAgent', {
                data: {
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用获取所有代理商成功')
                    console.log(response.data)
                    response.data.forEach(item => {
                        this.options.push(item)
                    })
                    if (this.options.length > 0) {
                        this.select = 0
                    }
                }
                this.getData()
                if (response.ret !== '0') {
                    console.log('调用获取所有代理商失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        // 换页方法
        handleCurrentChange (val) {
            this.page = val
            this.getNetpayCompanyCommisonInfo()
        },
        getNetpayCommisionSumMoney () {
            // 获取 整体概况
            let {timestamp, signature} = this.returnTimestampAndSignature()
            // 权限获取
            this.$http.post(this.$store.state.yjyIP + '/business_report_service/agent/getNetpayCommisionSumMoney', {
                data: {
                    agentName: this.userName
                    // agentName: 'agent_admin'
                },
                companycode: this.companyCode,
                timestamp: timestamp,
                signature: signature
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                response = response.body
                if (response.code === '0') {
                    this.commisionSumMoney = response.result || {}
                } else {
                    this.commisionSumMoney = {}
                }
            })
        },
        getNetpayCompanyCommisonInfo () {
            // 获取 业务收益
            let {timestamp, signature} = this.returnTimestampAndSignature()
            let startTime = new Date(this.timeStart).getTime()
            let endTime = new Date(this.timeEnd).getTime()
            // 权限获取
            this.$http.post(this.$store.state.yjyIP + '/business_report_service/agent/getNetpayCompanyCommisonInfo', {
                data: {
                    agentName: this.userName,
                    // agentName: 'agent_admin',
                    startTime: startTime,
                    endTime: endTime,
                    regionCode: this.cityLevelCode,
                    page: this.page,
                    pageNum: 10
                },
                companycode: this.companyCode,
                timestamp: timestamp,
                signature: signature
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                response = response.body
                if (response.code === '0') {
                    this.showList = response.result.content || []
                    this.totalNum = response.result.totalElements || 0
                } else {
                    this.showList = []
                    this.totalNum = 0
                }
            })
        },
        getProvice () {
            let params = {
                params: {
                }
            }
            this.$http.get(this.$store.state.IP + '/region/provincialLevel', params).then(response => {
                console.log('-------------------------------------------')
                console.log('调用获取行政区域返回')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用返回行政区域成功')
                    this.options1.push({
                        regioncode: '',
                        regionname: '不限'
                    })
                    response.data.forEach(item => {
                        this.options1.push(item)
                    })
                }
                if (response.ret !== '0') {
                    console.log('调用返回行政区域失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
            // 调用删除人员接口
        },
        getNetpayCompanyWeekInfo () {
            let {timestamp, signature} = this.returnTimestampAndSignature()
            // 收益分析
            this.$http.post(this.$store.state.yjyIP + '/business_report_service/agent/getNetpayCompanyWeekInfo', {
                data: {
                    agentName: this.userName
                    // agentName: 'agent_admin'
                },
                companycode: this.companyCode,
                timestamp: timestamp,
                signature: signature
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                response = response.body
                if (response.code === '0') {
                    this.sortByTime(response.result)
                } else {
                }
            })
        },
        sortByTime (data) {
            // 按时间排序
            if (data.length < 1) {
                return false
            }
            let sortArr = []
            for (let key in data) {
                sortArr.push(new Date(key).getTime())
            }
            sortArr.sort((a, b) => {
                return a - b
            })
            this.xAxis = []
            this.series2 = []
            sortArr.forEach(item => {
                for (let key in data) {
                    let timestamp = new Date(key).getTime()
                    if (item === timestamp) {
                        this.xAxis.push(key)
                        this.series2.push(data[key])
                    }
                }
            })
            this.setPie1()
        },
        search () {
            // 搜索 结果
            this.page = 1
            this.getNetpayCompanyCommisonInfo()
        },
        setPie1 () {
            this.$nextTick(() => {
                this.myChart = echarts.init(
                    document.getElementById('myChart2'),
                    'light'
                )
                //          echarts.init(this.$refs.chartOne)
                console.log(this.xAxis, this.series1)
                this.myChart.setOption({
                    title: {
                        text: ''
                    },
                     tooltip: {
                        trigger: 'item'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.xAxis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                    //     data: this.series1,
                    //     type: 'line',
                    //     smooth: true,
                    //     areaStyle: {
                    //         color: {
                    //             type: 'linear',
                    //             x: 0,
                    //             y: 0,
                    //             x2: 0,
                    //             y2: 1,
                    //             colorStops: [{
                    //                 offset: 0, color: 'rgba(88,160,253,1)'
                    //             }, {
                    //                 offset: 0.5, color: 'rgba(88,160,253,0.7)'
                    //             }, {
                    //                 offset: 1, color: 'rgba(88,160,253,0)'
                    //             }]
                    //         }
                    //     },
                    //     lineStyle: {
                    //         normal: {
                    //             color: 'rgba(88,160,253,1)'
                    //         }
                    //     },
                    //     itemStyle: {
                    //         normal: {
                    //             color: 'rgba(88,160,253,1)'
                    //         }
                    //     }
                    // }, {
                        data: this.series2,
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(47, 194, 91,1)'
                                }, {
                                    offset: 0.5, color: 'rgba(47, 194, 91,0.7)'
                                }, {
                                    offset: 1, color: 'rgba(47, 194, 91,0)'
                                }]
                            }
                        },
                        lineStyle: {
                            normal: {
                                color: 'rgba(47, 194, 91,1)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(47, 194, 91,1)'
                            }
                        }
                    // }, {
                    //     data: this.series3,
                    //     type: 'line',
                    //     smooth: true,
                    //     areaStyle: {
                    //         color: {
                    //             type: 'linear',
                    //             x: 0,
                    //             y: 0,
                    //             x2: 0,
                    //             y2: 1,
                    //             colorStops: [{
                    //                 offset: 0, color: 'rgba(240, 72, 100,1)'
                    //             }, {
                    //                 offset: 0.5, color: 'rgba(240, 72, 100,0.7)'
                    //             }, {
                    //                 offset: 1, color: 'rgba(240, 72, 100,0)'
                    //             }]
                    //         }
                    //     },
                    //     lineStyle: {
                    //         normal: {
                    //             color: 'rgba(240, 72, 100,1)'
                    //         }
                    //     },
                    //     itemStyle: {
                    //         normal: {
                    //             color: 'rgba(240, 72, 100,1)'
                    //         }
                    //     }
                    }]
                })
                this.myChart.resize()
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e7ed;
    z-index: 1;
}
.el-tabs__nav-scroll
    padding 0 22px

.order-report-wrapper
    width: 100%

    .order-report-wrapper-title
        width 100%
        height 40px
        font-size 14px
        line-height 30px
        padding-left 22px
.order-report-container
    padding 0 15px
    background #fff
.report-table-form1-item
    display: inline-block
    vertical-align: top
    height: 32px
    margin-right: 25px
    line-height: 32px
    &.word
        margin-right: 0
    &.samll
        font-size: 15px
        text-align left
    &.big
        margin-right: 100px
.title
    line-height 40px
    font-weight bold
.total
    padding 10px 0 40px 30px
    display flex
    justify-content space-between
    border-top 1px solid #ebeef5
    box-shadow 0px 6px 3px -2px #ebeef5
    font-size 14px
.total-item
    flex 25% 0 0
.total-item-sub-title
    line-height 50px
.total-item-sub-num
    font-size 35px
    font-weight bold
    color #ee5335
.analysis-box
    border-top 1px solid #ebeef5
    padding 20px 25px
    display flex
    justify-content space-between
.analysis-rate
    flex 20px 0 0
.analysis-title
    line-height 40px
.analysis-content
    display flex
    align-items baseline
    justify-content space-between
.analysis-num
    font-size 25px
    vertical-align bottom
.analysis-upper
    vertical-align bottom
.icon
    font-size 20px
.green
    color #00a954
.red
    color #f04134
.analysis-chart
    flex auto 1 1
.eChart-pic
    width 100%
    height 300px
    div
        width 100%
.valueMap
    text-align center
    font-size 14px
.rect
    display inline-block
    width 18px
    height 15px
    margin 0 10px 0 15px
    border-radius 4px
    vertical-align bottom
    &.blue
        background rgba(88,160,253,1)
    &.green
        background rgba(47, 194, 91,1)
    &.red
        background rgba(240, 72, 100,1)
.report-table-block
    width: 100%
    padding-top: 22px
    height: 50px
    background: #fff
    box-sizing: border-box
.report-table-block-in
    float: right
    padding-right: 17px
// other
.pt30
    padding-top 30px
.col94
    color #949494
</style>
